<template>
    <div class="login-wrap">
        <div class="absolute fit">
            <!-- <video
                class="absolute fit"
                src="/#{static}/bg/g-5.mp4"
                muted
                autoplay
                loop
                preload="auto"
                style="object-fit: cover"
            ></video> -->
            <yinhua class="fit" />
        </div>
        <div class="login-icp">
            <div>Copyright © 2022-2023 Design By Veigar</div>
            <div>ICP备000000000号-1</div>
        </div>
        <div class="ms-login">
            <div class="ms-title">系统登陆</div>
            <el-form :model="conf.param" :rules="conf.rules" ref="login" label-width="0px" class="ms-content">
                <template v-if="!conf.param.isPhone">
                    <el-form-item prop="login_name">
                        <el-input v-model="conf.param.login_name" placeholder="账号">
                            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="login_password">
                        <div class="row no-wrap" style="width: 100%">
                            <el-input
                                type="password"
                                placeholder="密码"
                                v-model="conf.param.login_password"
                                @keyup.enter.native="submitForm()"
                                :class="[conf.param.isPhone ? 'input-phone' : undefined]"
                            >
                                <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                            </el-input>
                        </div>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item prop="phone">
                        <el-input v-model="conf.param.phone" placeholder="手机号">
                            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <div class="row no-wrap" style="width: 100%">
                            <el-input
                                placeholder="验证码"
                                v-model="conf.param.code"
                                @keyup.enter.native="submitForm()"
                                class="input-phone"
                            >
                                <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                            </el-input>
                            <el-button
                                :loading="conf.textCode.loading"
                                :disabled="conf.textCode.status"
                                type="primary"
                                @click="sendCode()"
                                style="border-radius: 0px 4px 4px 0px"
                            >
                                {{ conf.textCode.text }}
                            </el-button>
                        </div>
                    </el-form-item>
                </template>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()" :loading="conf.loading">{{ conf.text }}</el-button>
                    <div
                        style="color: #ffffff; font-size: 14px; margin-top: 10px; cursor: pointer"
                        @click="conf.param.isPhone = !conf.param.isPhone"
                    >
                        切换{{ conf.param.isPhone ? '账号' : '验证码' }}登录
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { LSUtil } from 'tools-vue3'
import { onMounted, reactive, ref } from 'vue'
import ApiAuthPhone from '~/apis/auth/ApiAuthPhone'
import ApiAuthUser from '~/apis/auth/ApiAuthUser'
import yinhua from '~/components/particle/yinhua/index.vue'
import SStore from '~/store/SStore'
import SSys from '~/store/SSys'
import SUser from '~/store/SUser'
import System from '~/utils/System'
import { getTabelTree } from '../auth/util/tree'

const conf = reactive({
    param: {
        isPhone: false,
        login_name: '',
        login_password: '',
        phone: '',
        code: ''
    },
    textCode: {
        loading: false,
        text: '发送验证码',
        status: false
    },
    rules: {
        login_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        login_password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
    },
    loading: false,
    text: '登录'
})

SStore.clearUserInfo()

const login = ref()

const submitForm = () => {
    conf.loading = true
    login.value.validate(async (valid: any) => {
        if (valid) {
            let param = conf.param.isPhone
                ? {
                      phone: conf.param.phone,
                      code: conf.param.code
                  }
                : {
                      account: conf.param.login_name,
                      password: conf.param.login_password
                  }
            const res = await ApiAuthUser.login(param)
            if (res.status) {
                conf.text = '加载中'
                SUser.setToken(res.data.token)
                let tree = [getTabelTree(0, res.data.menuList)]
                SSys.setMenuList(tree[0].children, res.data.menuList)
                SSys.setApiList(res.data.apiList)
                System.router.replace('/')
            }
        }
        conf.loading = false
        conf.text = '登录'
    })
}

let codeTimer = null as any

const getCodeTime = (time?: number) => {
    Timer.un(codeTimer)
    if (StrUtil.isNull(time)) time = parseInt(LSUtil.get('codeTime'))
    if (StrUtil.isNull(time)) return
    conf.textCode.status = false
    codeTimer = Timer.on(
        () => {
            let thisTime = new Date().getTime()
            if (thisTime - time! > 0) {
                conf.textCode.status = false
                Timer.un(codeTimer)
                conf.textCode.text = '发送验证码'
            } else {
                conf.textCode.status = true
                const m = (time! - thisTime) / 1000
                conf.textCode.text = m.toFixed(0) + '秒后再试'
            }
        },
        1000,
        true
    )
}

const sendCode = async () => {
    const res = await ApiAuthPhone.sendCode(conf.param.phone)
    if (res.status) {
        let codeTime = new Date().getTime()
        codeTime = codeTime + res.data * 1000
        getCodeTime(codeTime)
        LSUtil.set('codeTime', codeTime)
    }
}

onMounted(() => {
    getCodeTime()
})
</script>

<style lang="less" scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(/#{static}/bg/g-1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
}

.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    transition: all 0.3s;
    margin: -130px 0 0 -175px;
    border-radius: 5px;
    background: rgb(0 0 0 / 20%);
    overflow: hidden;
    box-shadow: 0 0 10px 0px #fff;
    &:hover {
        background: rgb(0 0 0 / 40%);
        box-shadow: 0 0 20px 0px #fff;
    }
}

.ms-content {
    padding: 30px 30px;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
    cursor: pointer;
}

.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}

.input-phone {
    &:deep(.el-input__wrapper) {
        border-radius: 4px 0px 0px 4px;
    }
}

.login-icp {
    position: fixed;
    bottom: 10px;
    text-align: center;
    width: 100vw;
    font-size: 12px;
    line-height: 20px;
    color: #ffffff;
    padding: 0px 10px;

    & > div {
        display: inline-block;
        padding: 0px 10px;
    }
}
</style>
